<template>
  <div class="news-wrap">
    <img
      src="https://m.360buyimg.com/mobilecms/jfs/t14752/82/2574581467/6535/c8158ace/5aa8935bN94e31ff6.jpg.dpg"
      alt
    />
    <div class="news">
      <div class="swiper-container" id="swiper3">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in newsList" :key="index"><p><span>{{item.type}}</span>{{item.content}}</p></div>
          
        </div>
      </div>
    </div>
    <div class="more">
      <span>|</span>
      <span>更多</span>
    </div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import Swiper from "swiper"
export default {
  name: "jdnews",
  components: {},
  data() {
    return {
      show: true,
      newsList: [
        {
          type: "推荐",
          content: "三星降价卷土重来，骁龙845+128GB+6.1英寸"
        },
        {
          type: "Hot",
          content: "骁龙855 Plus+5800毫安大电池，新机价格感人"
        },
        {
          type: "最新",
          content: "华为麒麟980已兜为千元机"
        },
        {
          type: "热门",
          content: "华为：之前的“鸿蒙”系统是假的，真正的华为系统是它！"
        }
      ]
    };
  },
  methods: {},
  mounted(){
   new Swiper('#swiper3', {
  autoplay: true,//可选选项，自动滑动
  direction : 'vertical',
  loop:true,
  speed:400,
  
})
  }
};
</script>
<style>
.more span {
  color: #181818;
  font-size: 14px;
  margin-left: 2px;
  display: inline-block;
}
.more {
  flex-shrink: 0;
  width: 46px;
}
.news-wrap {
  position: relative;
  width: 100%;
  height: 33px;
  padding: 0 5.5px;

  /* border: red solid 1px; */
  overflow: hidden;
  z-index: -50;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.news-wrap img {
  width: 80px;
  height: 17px;
}
.news p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  height: 33px;
  line-height: 33px;
}
.news {
  position: absolute;
  width: 60%;
  left: 90px;
  top: 0;
  margin-left: 5px;
}

.news p span {
  color: red;
  margin-right: 5px;
}
</style>